<template>
    <div class="pages">
        <div class="search">
            <!-- <van-search background="#4674C9" @click-right-icon="searchLists" v-model="search" left-icon="" :right-icon="icon"/> -->
            <div class="search-main">
                <input type="text" class="search-key" v-model="search.key">
                <van-icon name="cross" class="search-close" v-show="search.closeShow" />
                <img :src="icon.dividerIcon" class="search-divider">
                <img :src="icon.searchIcon" class="search-icon" @click="searchLists">
            </div>
        </div>
        <div class="select">
            <van-dropdown-menu active-color="#4674C9">
                <van-dropdown-item :title="state.select.type.text" ref="taskStatusDom">
                    <van-tree-select @click-item="treeSelect" v-model:active-id="state.select.type.activeId"
                        v-model:main-active-index="state.select.type.activeIndex" :items="state.select.type.items" />
                </van-dropdown-item>

                <van-dropdown-item :title="state.select.responsePlatform.text" @change="menuChange"
                    v-model="state.select.responsePlatform.value" :options="state.select.responsePlatform.options">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div class="lists">
            <van-pull-refresh class="pull-refresh" v-model="lists.refresh.loading" @refresh="onRefresh">
                <van-list v-model:loading="lists.more.loading" :finished="lists.more.finished" finished-text="没有更多了"
                    @load="onLoad">
                    <div class="item" @click="toDetail(item)" v-for="(item, idx) in lists.lists" :key="idx">
                        <p class="title" v-text="item.name"></p>
                        <span class="item-text container">关键字</span>
                        <span class="item-text">：</span>
                        <span class="item-text">{{ item.keyword }}</span>
                        <br>
                        <span class="item-text container">发布时间</span>
                        <span class="item-text">：</span>
                        <span class="item-text">{{ item.keyword }}</span>
                        <div class="label">禁售</div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import searchIcon from '@/assets/imgs/workbench/wb_search.png';
import dividerIcon from '@/assets/imgs/workbench/wb_input_divider.png';

const router = useRouter();
// 搜索
const icon = reactive({
    searchIcon: searchIcon,
    dividerIcon: dividerIcon
})
const search = reactive({
    key: '',
    closeShow: false
});
const searchLists = () => {
    console.log('search', search.key);
}

const state = reactive({
    select: {
        type: {
            text: '类型',
            activeId: 1,
            activeIndex: 0,
            items: [
                {
                    text: '类型一',
                    children: [
                        { text: '子类型一', id: 1 },
                        { text: '子类型二', id: 2 },
                        { text: '子类型三', id: 3 },
                        { text: '子类型四', id: 4 },
                    ],
                },
                {
                    text: '类型二',
                    children: [
                        { text: '子类型一', id: 5 },
                        { text: '子类型二', id: 6 },
                        { text: '子类型三', id: 7 },
                        { text: '子类型四', id: 8 },
                    ],
                },
            ]
        },
        responsePlatform: {
            text: '任务类型',
            value: 1,
            options: [{
                text: '任务类型一',
                value: 1
            }, {
                text: '任务类型二',
                value: 2
            }, {
                text: '任务类型三',
                value: 3
            }]
        }
    }
})

const lists = reactive({
    refresh: {
        loading: false
    },
    more: {
        loading: false,
        finished: false
    },
    lists: [] as any
})
watch(search, () => {
    search.closeShow = search.key.length > 0;
})

// 下拉刷新回调
const onRefresh = () => {
    // 清空列表数据
    lists.more.finished = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    lists.more.loading = true;
    onLoad();
}


// 加载更多回调
const onLoad = () => {
    setTimeout(() => {
        if (lists.refresh.loading) {
            lists.lists = [];
            lists.refresh.loading = false;
        }

        let temp = [{
            id: '1',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '2',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '3',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '4',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '5',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '6',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '7',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }, {
            id: '8',
            name: '野生动植物',
            keyword: 'XXXXXXXXXXXXXXXX',
            responsePlatform: 'XXXXXXXXXXXXXXXXXXXXXXX',
        }];
        lists.lists.push(...temp);
        lists.more.loading = false;

        if (lists.lists.length >= 40) {
            lists.more.finished = true;
        } else {
            lists.more.finished = false;
        }
    }, 1000);
}

const taskStatusDom = ref();

// 任务指令选中回调
const treeSelect = (item: any) => {
    state.select.type.text = item.text;
    taskStatusDom.value.toggle();
}

const menuChange = (value: any) => {
}

// 跳转详情页
const toDetail = (item: any) => {
    // router.push({ path: '/todo/taskapproval', query: item })
}
</script>
<style lang="scss" scoped>
.pages {
    height: 100%;
    display: flex;
    flex-direction: column;

    .search {
        width: 100%;
        height: 52px;
        background: #4674c9;
        padding: 12px;
        box-sizing: border-box;

        .search-main {
            width: 100%;
            height: 100%;
            border-radius: 2.5px;
            background: white;
            display: flex;
            align-items: center;

            .search-key {
                width: 100%;
                background: none;
                border: 0;
                padding: 0 12px;
            }

            .search-close {
                width: 12px;
                height: 12px;
                margin-right: 12px;
            }

            .search-divider {
                width: 0.5px;
                height: 13px;
                margin-right: 12px;
            }

            .search-icon {
                width: 12px;
                height: 12px;
                margin-right: 12px;
            }
        }
    }

    .select {
        &:deep(.van-dropdown-menu) {
            .van-dropdown-menu__bar {
                height: 40px;

                .van-dropdown-menu__item {
                    .van-dropdown-menu__title {
                        font-size: 10px;
                        font-weight: bold;
                        color: #181818;
                    }
                }
            }

            .van-dropdown-item {
                .van-tree-select {
                    .van-tree-select__nav {
                        .van-sidebar-item--select {
                            color: $primary-color;

                            &::before {
                                content: none;
                            }
                        }
                    }

                    .van-tree-select__content {
                        .van-tree-select__item--active {
                            color: $primary-color;
                        }
                    }
                }
            }
        }

        .divider {
            width: 0.5px;
            height: 13.5px;
            background: url('../../../assets/imgs/workbench/wb_input_divider.png');
        }
    }

    .lists {
        flex: 1;
        height: 0;
        overflow-y: scroll;

        .pull-refresh {
            .van-list {
                box-sizing: border-box;
                padding: 9px;

                .item {
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    padding: 18px 16px;
                    margin-bottom: 9px;
                    position: relative;

                    &:last-child {
                        margin-bottom: 0px;
                    }

                    .title {
                        font-size: 14px;
                        font-weight: bold;
                        text-align: left;
                        color: #181818;
                        margin-bottom: 11px;
                    }

                    .item-text {
                        font-size: 10px;
                        font-weight: bold;
                        text-align: left;
                        color: #646464;
                        margin-bottom: 6px;
                        text-align: justify;
                        text-align-last: justify;
                        display: inline-block;
                    }

                    .container {
                        width: 50px;
                    }

                    .label {
						position: absolute;
						right: 0;
						top: 0;
						width: 55px;
						height: 20px;
						border-top-right-radius: 5px;
						border-bottom-left-radius: 5px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 10px;
						font-weight: bold;
                        color: #EF0D0D;
						background-color: #FFF1F2;
					}
                }
            }
        }
    }
}
</style>